<template>
  <div class="theme-container" v-if="cnote.id" style="background: #fff;">
    <div class="common-wrapper show-series">
      <div v-show="payOpenFlag" :class="[payOpenFlag?'flex':'']" class="text-center  flex-c align-center justify-center fz24 c333 cursor-pointer" @click.prevent="handleOpenPayDialog" style="height: 100vh;position: fixed;z-index: 1000;width: 100%;top:0;background:rgba(255,255,255,0.9)">
        <h1>你暂无权限，点击订阅进行学习</h1>
        <button
            class="ant-btn mt20 ant-btn-success fz14" style="width: 100px" type="button"><i
            class="iconfont icon-gouwuchekong mr5"></i><span>订阅学习</span></button>
      </div>
      <div>
        <div id="copyhtml" style="position: fixed;top:-1000px;">
          课程标题：《{{ cnote.title }}》<br/>
          课程地址：https://www.study512.com/note/detail/{{ cnote.id }}<br/>
          平台来源：学习512-致力于帮助有梦想的年轻人获取学习价值<br/>
          商业转载请联系作者获得授权，非商业转载请注明出处。
        </div>
        <div class="outline-head active">
          <div class="head-left-nav head-nav">
            <nuxt-link to="/" title="返回"
                       class="closed ol-icons fz20 iconfont icon-fangxiang_jiantoufangxiang-xiangzuo  pr tp1"></nuxt-link>
            <div class="ml20 flex align-items pr ftp1" v-if="false">
              <k-star disable :num="Math.floor(cnote.score)">
                <span class="fz16 ml3">{{ cnote.score }}分</span>
              </k-star>
            </div>
            <span class="pointer flex align-items" title="收藏" @click="handleUserFav"
                  :class="[cnote.favFlag == 1? 'green':'']">
                  <span
                      class="closed ol-icons fz18 iconfont icon-eye ml5 pr ftp1"></span><span
                class="fz12">{{ cnote.viewcount }}</span>
                  <span
                      :class="[cnote.favFlag == 1? 'green icon-shoucang':'']"
                      class="closed ol-icons fz18 iconfont icon-star1 ml5 pr ftp1">

                  </span><span class="fz12">{{ cnote.favNum }}</span></span>
            <a href="#ksd-editor-box" title="点击定位评论" v-if="cnote.commentFlag==1"
               class="ml10 pointer ml5 flex align-items">
              <i class="iconfont icon-pinglun1 fz18"></i>
              <span class="ml3 fz12">{{ cnote.commentNum || 0 }}</span>
            </a>
            <a class="nav-i copy-btn" style="cursor: pointer" title="点我复制" @click="handleClipboardText($event)"
               data-clipboard-target="#copyhtml">
              <i class="ol-icons iconfont icon-fuzhi"></i>
            </a>
            <div v-if="userStore.role == 'admin' || cnote.uuid == userStore.uuid" class="ml10">
              <button class="ant-btn ant-btn-primary mr10 gui-padding-m fz14" @click="handleOpenDidlogMain"><i
                  class="iconfont icon-zhuanti cof mr5 pr ftp1"></i>管理视频
              </button>
              <button class="ant-btn ant-btn-primary mr10 gui-padding-m fz14" @click.prevent="handleRefreshCache">
                刷新缓存
              </button>
            </div>
          </div>
          <div class="head-nav head-right-nav">
            <n-tooltip trigger="hover"  placement="bottom" v-if="cnote.panLink">
              <template #trigger>
                <a v-if="cnote.buyFlag==1" class="ant-btn ant-btn-primary mainbg mr10 gui-padding-m" target="_blank"
                   :href="cnote.panLink">
                  <i class="iconfont icon-wangpan mr5"></i>
                  <span class="fz12 fb">课程网盘<span class="fz12 ml5"></span></span>
                </a>
                <a v-else class="ant-btn ant-btn-primary mainbg mr10 gui-padding-m" @click="handleOpenPayDialog">
                  <i class="iconfont icon-wangpan mr5"></i>
                  <span class="fz12 fb">解锁课程网盘<span class="fz12 ml5"></span></span>
                </a>
              </template>
              <span v-if="cnote.buyFlag==1">(密码：{{ cnote.panPwd }})</span>
              <span v-else>订阅解锁密码</span>
            </n-tooltip>
            <div>
              <button v-if="cnote.buyFlag==0" @click.prevent="handleOpenPayDialog"
                      class="ant-btn ant-btn-success fz14" style="width: 100px" type="button"><i
                  class="iconfont icon-gouwuchekong mr5"></i><span>订阅学习</span></button>
            </div>
            <nuxt-link :to="'/note/base?id='+cnote.id" target="_blank" class="nav-i" title="编辑"
                       v-if="userStore.role == 'admin' || cnote.uuid == userStore.uuid">
              <i class="ol-icons iconfont icon-bianji2"></i>编辑基础信息
            </nuxt-link>
            <nuxt-link :to="'/note/add?id='+cnote.id" target="_blank" class="nav-i" title="编辑"
                       v-if="userStore.role == 'admin' || cnote.uuid == userStore.uuid">
              <i class="ol-icons iconfont icon-bianji2"></i>管理章节
            </nuxt-link>
          </div>
        </div>
        <main class="page-container" style="margin-top: 40px">
          <ksd-banner-vip></ksd-banner-vip>
          <ksd-banner-channel :type="9" ref="bannerRef" :height="100"></ksd-banner-channel>
          <k-loading :show="loadingflag"></k-loading>
          <div class="content-area">
            <div class="container">
              <div>
                <div v-if="playUrl">
                  <div class="video-main  pr"  v-if="editObj.videoid && Array.isArray(editObj.videoid) &&  editObj.videoid.length > 0">
                    <div class="flex justify-content-between mb10">
                      <h1 class="flex align-items flex1" v-if="showFlag">
                        <img src="/imgs/play.gif" alt="" class="mr5"/>
                        <span>当前正在播放：{{ editObj.chapterTitle }}</span>
                        <span v-if="editObj.lessonTitle" class="ml5 mr5">/</span>
                        <span v-if="editObj.lessonTitle">{{ editObj.lessonTitle }}</span>
                      </h1>
                      <button class="pr ant-btn ant-btn-primary mr10 gui-padding-m fz14" @click="handleHideVideo"><i
                          class="iconfont icon-shezhi cof mr5 pr ftp1"></i>{{ videoHidden ? "隐藏视频" : "显示视频" }}
                      </button>
                      <button id="finally" class="pr ant-btn ant-btn-primary mr10 gui-padding-m fz14"
                              @click="expand=!expand"><i
                          class="iconfont icon-wanfajieshao1 mr5 pr tp1"></i>{{ expand ? '关闭目录' : '打开目录' }}
                      </button>
                    </div>
                    <div v-show="videoHidden">
                      <video ref="videoboxRef" controlsList="nodownload" :poster="cnote.img"
                             style="width: 100%;height:100%;" controls
                             :key="playUrl"></video>
                      <div class="videoplaybox mt10" v-if="editObj.videoid && editObj.videoid.length > 0 && expand">
                        <ul class="ulbox">
                          <li v-for="(pitem,pindex) in editObj.videoid" :key="pindex" style="flex:1;text-align: center">
                            <div class="titlebox fb flex align-center justify-content-between" title="点击展开/收起"
                                 @click="pitem.expand=!pitem.expand">
                              <div>{{ pitem.title }}
                                <span
                                    v-if="pitem.chapterList && pitem.chapterList.length > 0">({{ pitem.chapterList.length }})</span>
                              </div>
                              <div>
                                <i v-if="pitem.expand" class="iconfont icon-fangxiang_jiantoufangxiang-xiangxia"></i>
                                <i v-else class="iconfont icon-fangxiang_jiantoufangxiang-xiangshang"></i>
                              </div>
                            </div>
                            <ul v-if="pitem.expand && pitem.chapterList && pitem.chapterList.length > 0">
                              <li v-for="(item,index) in pitem.chapterList">
                                <a @click="handleChangeLoadvideo(item,pindex,index)" :title="item.title"
                                   class="flex align-center"
                                   :class="[playindex==index && cplayindex == pindex?'active':'']"
                                   href="javascript:void(0);"><img
                                    v-if="playindex==index && cplayindex == pindex" src="/imgs/play.gif" alt=""
                                    class="mr5">
                                  <span> {{ item.title }}（{{ item.duration }}）</span>
                                </a>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="markdownbox" class="markdown-body editormd-html-preview" style="padding:0px 0 20px">
                  <div  v-html="editObj.htmlcontent"></div>
                </div>
                <footer class="page-meta-x" v-if="editObj.htmlcontent">
                  <div class="meta-item last-updated">
                  <span class="xicon-container left meta-item-label">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                           viewBox="0 0 32 32" class="xicon-icon"
                           style="width: 20px; height: 20px; font-size: 20px; color: inherit;">
                          <path
                              d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z"
                              fill="currentColor">
                          </path>
                      </svg>
                      <span class="xicon-content" style="color: inherit; font-size: 14px;">
                        最后更新于：{{ formatTimeToStr(cnote.updateTime) }}
                      </span>
                  </span>
                  </div>
                </footer>
                <div class="flex justify-content-between gui-padding"
                     style="background: #f0f0f0" v-if="editObj.htmlcontent">
                  <div>
                    <a v-if="prevList.id" :href="'/note/detail/'+prevList.id">上一篇：{{ prevList.title }}</a>
                    <span v-else>上一篇：暂无</span>
                  </div>
                  <div>
                    <a v-if="nextList.id" :href="'/note/detail/'+nextList.id">下一篇：{{ nextList.title }}</a>
                    <span v-else>下一篇：暂无</span>
                  </div>
                </div>
                <footer class="markdown-body mt20" v-if="cnote.clientFlag==1"
                        style="margin-bottom: 0">
                  <h2>学习交流群</h2>
                  <k-qun :data="cnote"></k-qun>
                </footer>
                <nav class="page-nav" v-if="cnote.commentFlag==1">
                  <ksd-note-comment :opid="cnote.id" closescore></ksd-note-comment>
                </nav>
              </div>
              <div id="toc" class="toc2" v-show="showChapter"></div>
            </div>
          </div>
        </main>
      </div>
    </div>
  </div>
  <div v-if="userStore.role == 'admin' || cnote.uuid == userStore.uuid">
    <teleport to="body">
      <settingvideo :edit-obj="editObj" :clist="chapterList" ref="settingRef"></settingvideo>
    </teleport>
  </div>

  <teleport to="body">
    <ksd-note-pay ref="payRef"></ksd-note-pay>
  </teleport>

  <teleport to="body">
    <k-login @success="handleLoginFinshed"></k-login>
  </teleport>
</template>
<script setup>
import md5 from 'js-md5'
import hljs from 'highlight.js';
import 'highlight.js/styles/panda-syntax-light.min.css';
import Clipboard from "clipboard";
import settingvideo from "@/pages/note/settingvideo.vue";
const route = useRoute()
const router = useRouter()
const userStore = useStore.userState()
const showFlag = ref(false)
const payOpenFlag = ref(false)
const showChapter = ref(true)
const noteId = ref("5778758898640666700")
const url = ref(route.query.url)
const cnote = ref({})
const chapterList = ref([])
const loadingflag = ref(false)
const editObj = ref({
  chapterTitle: "",
  lessonTitle: "",
  htmlcontent: "",
  videoid: [],
  chapterId: "",
  lessonId: "",
  noteId: ""
})
const payRef = ref(null)
const percent = ref(0)
const prevList = ref({})
const nextList = ref({})
const settingRef = ref({})
var timer = null;
const playindex = ref(0)
const cplayindex = ref(0)
const expand = ref(false)
const playUrl = ref("")
const videoboxRef = ref()
const videoHidden = ref(true)
const handleHideVideo = () => {
  videoHidden.value = !videoHidden.value
  if (!videoHidden.value) {
    videoboxRef.value.pause()
  }
}
// 刷新缓存
const handleRefreshCache = async () => {
  await useRefreshCache(cnote.value.id)
  useMessage().success("清除成功!")
}

const handleOpenDidlogMain = async () => {
  settingRef.value.handleOpen(cnote.value.id, chapterList.value)
}

const handleLoadPrevNext = async () => {
  const resp = await useLoadPrevNext(cnote.value.id)
  if(resp.data && resp.data.length > 0) {
    var cindex = resp.data.findIndex(c => c.id == cnote.value.id)
    if (cindex == -1 || cindex == 0) {
      prevList.value = []
      nextList.value = resp.data[cindex + 1]
    } else if (cindex == resp.data.length - 1) {
      prevList.value = resp.data[cindex - 1]
      nextList.value = []
    } else {
      prevList.value = resp.data[cindex - 1]
      nextList.value = resp.data[cindex + 1]
    }
  }
}

function getElementOffsetTop(element) {
  if (!element) return 0;
  return element.offsetTop + getElementOffsetTop(element.offsetParent);
}

function generateTOC() {
  let toc = document.getElementById('toc');
  if (!showChapter.value) {
    showChapter.value = false
    toc = document.getElementById('toc2');
  }
  var dom = document.querySelector("#markdownbox");
  if (!dom) return;
  const headings = document.querySelector("#markdownbox").querySelectorAll('h1,h2,h3,h4,h5');
  const tocList = document.createElement('ul');
  if (toc && headings.length > 0) {
    toc.innerHTML = "<h1>课程大纲</h1>"
  }
  headings.forEach((heading) => {
    const id = `heading-` + md5(heading.textContent);
    heading.id = id;
    const listItem = document.createElement('li');
    listItem.setAttribute("opid", id)
    listItem.setAttribute("cname", "items-" + heading.tagName.toLowerCase())
    listItem.addEventListener("click", function () {
      for (var i = 0; i < tocList.children.length; i++) {
        tocList.children[i].className = tocList.children[i].getAttribute("cname")
      }
      this.className += " active"
      var targetDomTop = getElementOffsetTop(getDom(this.getAttribute("opid")))
      document.documentElement.scrollTop = targetDomTop - 80
    })
    listItem.className = "items-" + heading.tagName.toLowerCase()
    listItem.title = heading.textContent;
    listItem.innerHTML = `<span>${heading.textContent}</span>`;
    tocList.appendChild(listItem);
  });
  if (tocList.children && tocList.children.length > 0) {
    toc.style.display = "block"
    toc.appendChild(tocList);
  } else {
    toc.style.display = "none"
    if (!showChapter.value) {
      showFlag.value = false;
    }
  }
}

const handleLoadDetail = async () => {
  try {
    loadingflag.value = true
    editObj.value.noteId = noteId.value
    const resp = await useLoadNoteDetailAll(noteId.value)
    cnote.value = resp.data
    cnote.value.id = noteId.value
    editObj.value.specialId = resp.data.specialId
    editObj.value.htmlcontent = resp.data.htmlContent
    handleLoadPrevNext()
    nextTick(() => {
      if (resp.data.videoid && JSON.parse(resp.data.videoid).length > 0) {
        editObj.value.videoid = resp.data.videoid ? JSON.parse(resp.data.videoid) : []
        if (editObj.value?.videoid[0]?.chapterList) {
          handleLoadvideo(editObj.value?.videoid[0]?.chapterList[0]?.vid, 0, 0)
        }
      }

      generateTOC()
      hljs.highlightAll();
      initCopyText()
      mkImageShow()
      loadingflag.value = false
    })
    useHead({
      title: cnote.value.title
    })
  } catch (e) {
    loadingflag.value = false
    showError({statusCode:404,statusMessage:e.message})
  }
}

// 复制
const handleClipboardText = (e) => {
  const clipboard = new Clipboard('.copy-btn')
  // 复制成功
  clipboard.on('success', () => {
    useMessage().success('内容已复制到剪切板，可粘贴')
    // 释放内存
    clipboard.destroy()
  })
  // 复制失败
  clipboard.on('error', () => {
    useMessage().error('代码复制失败')
    // 释放内存
    clipboard.destroy()
  })
}

// 收藏
const handleUserFav = debounce(() => {
  useLoginDialog().then(async (userStore) => {
    const params = {"opid": cnote.value.id}
    const resp = await useSaveCancelNoteFavApi(params)
    cnote.value.favFlag = resp.data
    if (resp.data == 1) {
      cnote.value.favNum++
    } else {
      cnote.value.favNum--
    }
  })
}, 300)

// 打开课程支付
const handleOpenPayDialog = async () => {
  // 需要登录
  await useLoginDialog()
  playUrl.value = ""
  showChapter.value = true
  payOpenFlag.value = true
  // 打开支付窗口
  payRef.value.handleOpen(cnote.value.id, cnote.value.price, cnote.value.title)
}

const handleChangeLoadvideo = (item, pindex, index) => {
  if (item.chapterId > 0 && item.lessonId > 0) {
    var chapter = chapterList.value.find(c => c.id == item.chapterId)
    var chapterIndex = chapterList.value.findIndex(c => c.id == item.chapterId)
    var lesson = chapter.children.find(c => c.id == item.lessonId)
    var lessonIndex = chapter.children.findIndex(c => c.id == item.lessonId) || -1
    chapter.expand = true;
    handleLoadLesson(lesson, chapterIndex, lessonIndex)
  }

  if (item.chapterId > 0 && !item.lessonId) {
    var chapterIndex = chapterList.value.findIndex(c => c.id == item.chapterId)
    var chapter = chapterList.value.find(c => c.id == item.chapterId)
    handleLoadChapter(chapter, chapterIndex)
  }
  videoboxRef.value.poster = item.img
  handleLoadvideo(item.vid, pindex, index)
}

const handleLoadvideo = async (vid, pindex, index) => {
  if (!vid) return
  if (playindex.value == index && cplayindex == pindex) {
    return;
  }
  handleChangeVideoMain(vid, pindex, index)
}

const handleChangeVideoMain = async (vid, pindex, index) => {
  playindex.value = index
  cplayindex.value = pindex
  playUrl.value = vid
  var resp = await useLoadAliplayerParse({vid})
  videoboxRef.value.src = resp.data
  videoboxRef.value.volume = 0.5
  videoboxRef.value.currentTime = localStorage.getItem('ksd-cc-currenttime-' + vid) || 0
  videoboxRef.value.playbackRate = localStorage.getItem("ksd-cc-playrate") || 1

  videoboxRef.value.onplay = async function () {
    if (!userStore.isLogin) {
      playUrl.value = ""
      await useLoginDialog()
    }

    if(userStore.isLogin && cnote.value.buyFlag <= 0){
      playUrl.value = ""
      payOpenFlag.value = true
    }
  }

  videoboxRef.value.onloadeddata = function () {
    videoboxRef.value.currentTime = sessionStorage.getItem('ksd-cc-currenttime-' + vid) || 0
    document.querySelector(".video-main").oncontextmenu = function () {
      return false;
    }
  }

  videoboxRef.value.onpause = function () {
    if(userStore.isLogin && cnote.value.buyFlag <= 0){
      playUrl.value = ""
      payOpenFlag.value = true
    }
  }

  // 监听变速事件
  videoboxRef.value.onratechange = function () {
    localStorage.setItem("ksd-cc-playrate", this.playbackRate)
    videoboxRef.value.playbackRate = this.playbackRate
  }

  videoboxRef.value.ontimeupdate = function (data) {
    var ctime = data.target.currentTime
    var duration = data.target.duration
    playindex.value = index
    sessionStorage.setItem('ksd-cc-currenttime-' + vid, ctime)
  }

  videoboxRef.value.onended = function (data) {
    playindex.value++
    expand.value = true
    var len = editObj.value?.videoid[cplayindex.value].chapterList.length
    if (len == playindex.value) {
      cplayindex.value++
      playindex.value = 0
    }
    playindex.value = playindex.value % len;
    var vid = editObj.value?.videoid[cplayindex.value].chapterList[playindex.value].vid
    handleChangeVideoMain(vid, cplayindex.value, playindex.value)
  }

  document.onkeydown = function (e) {
    var vol = 0.1;  //1代表100%音量，每次增减0.1
    var time = 3; //单位秒，每次增减10秒
    var e = event || window.event || arguments.callee.caller.arguments[0];
    var videoElement = videoboxRef.value
    //鼠标上下键控制视频音量
    if (e && e.keyCode === 38) {
      // 按 向上键
      videoElement.volume !== 1 ? videoElement.volume += vol : 1;
      return false;
    } else if (e && e.keyCode === 40) {
      // 按 向下键
      videoElement.volume !== 0 ? videoElement.volume -= vol : 1;
      return false;
    } else if (e && e.keyCode === 37) {
      // 按 向左键
      videoElement.currentTime !== 0 ? videoElement.currentTime -= time : 1;
      return false;
    } else if (e && e.keyCode === 39) {
      // 按 向右键
      videoElement.volume !== videoElement.duration ? videoElement.currentTime += time : 1;
      return false;
    } else if (e && e.keyCode === 32) {
      // 按空格键 判断当前是否暂停
      videoElement.paused === true ? videoElement.play() : videoElement.pause();
      return false;
    }
  }
}


definePageMeta({
  layout: "login",
})

const handleLoginFinshed = () => {
  window.location.reload()
}

function initCopyText() {
  $("#markdownbox").find("img").attr("title", "点击我可以进行预览")
  $("#markdownbox").find("a").attr("target", "_blank")
  $("#markdownbox").find("pre").prepend("<i class='iconfont iconfuzhi icon-fuzhi1 fz16 mb10' title='点击复制'></i>").find(".iconfuzhi").each(function (index, obj) {
    //杩欓噷浠ュ鍒禪RL涓轰緥
    var clipboard = new ClipboardJS(obj, {
      text: function () {
        var text = $(obj).next().get(0).innerText;
        return text;
      }
    })

    clipboard.on('success', function (e) {
      useMessage().success("复制成功");
    })

    clipboard.on('error', function (e) {
      useMessage().error("复制失败");
    })
  })

  $("#markdownbox").find("pre").each(function (index, obj) {
    if ($(this).outerHeight() >= 640) {
      $(this).prepend("<i class='iconfont zhedie icon-fangxiang_jiantoufangxiang-xiangxia fz20 mb10' title='折叠'></i>").find(".zhedie").on("click", function () {
        $(this).toggleClass("icon-fangxiang_jiantoufangxiang-xiangshang")
        $(this).parent().toggleClass("maxheight")
      })
    }
  })
}


useHead({
  title: "课程",
})


onUnmounted(() => {
  videoboxRef.value?.pause()
  videoboxRef.value?.stop()
})

onMounted(  () => {
  document.onkeydown = function (e) {
    if (e.keyCode == 123) {
      alert("小站不容易，请高抬贵手求放过");
      return false;
    }
    if (e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) {
      alert("小站不容易，请高抬贵手求放过");
      return false;
    }
    if (e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) {
      alert("小站不容易，请高抬贵手求放过");
      return false;
    }
    if (e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) {
      alert("小站不容易，请高抬贵手求放过");
      return false;
    }
    if (e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) {
      alert("小站不容易，请高抬贵手求放过");
      return false;
    }
  }

  handleLoadDetail()
})
</script>
<style scoped lang="scss">
.video-main {
  padding: 10px 10px 10px;
  background: #eee;
  overflow: hidden;
  border-radius: 6px;
}

.v {
  font-size: 16px;
  text-align: left
}

.v * {
  box-sizing: border-box;
  line-height: 2;
  transition: all .3s ease
}

.v a {
  position: relative;
  cursor: pointer;
  color: #1abc9c;
  text-decoration: none;
  display: inline-block
}

.v a:hover {
  color: #d7191a
}

.v .vinput {
  border: none;
  resize: none;
  outline: none;
  padding: 10px 5px;
  max-width: 100%;
  font-size: .775em
}

.v .vwrap {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
  padding: 10px
}

.v .vwrap input {
  background: transparent
}

.v .vwrap .vedit {
  position: relative;
  padding-top: 10px
}

.v .vwrap .vedit .vctrl {
  text-align: right;
  font-size: 12px
}

.v .vwrap .vedit .vctrl span {
  padding: 10px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer
}

.v .vwrap .vedit .vemojis {
  display: none;
  font-size: 18px;
  text-align: justify;
  max-height: 145px;
  overflow: auto;
  margin-bottom: 10px;
  box-shadow: 0 0 1px #f0f0f0
}

.v .vwrap .vedit .vemojis i {
  font-style: normal;
  padding: 7px 0;
  width: 38px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  vertical-align: middle
}

.v .vwrap .vedit .vpreview {
  padding: 7px;
  box-shadow: 0 0 1px #f0f0f0
}

.v .vwrap .vheader .vinput {
  width: 33.33%;
  border-bottom: 1px #dedede dashed
}

.v .vwrap .vheader .vinput:focus {
  border-bottom-color: #eb5055
}

@media screen and (max-width: 520px) {
  .v .vwrap .vheader .vinput {
    width: 100%
  }
}

.v .vwrap .vcontrol {
  font-size: 0;
  padding-top: 15px
}

.v .vwrap .vcontrol .col {
  display: inline-block;
  font-size: 16px;
  vertical-align: middle;
  color: #ccc
}

.v .vwrap .vcontrol .col.text-right {
  text-align: right
}

.v .vwrap .vcontrol .col svg {
  margin-right: 2px;
  overflow: hidden;
  fill: currentColor;
  vertical-align: middle
}

.v .vwrap .vcontrol .col.col-20 {
  width: 20%
}

.v .vwrap .vcontrol .col.col-80 {
  width: 80%
}

.v .vwrap .vmark {
  position: absolute;
  background: rgba(0, 0, 0, .65);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0
}

.v .power {
  color: #999;
  font-size: .75em;
  padding: .5em 0
}

.v .power a {
  font-size: .75em
}

.v .vinfo {
  font-size: 0;
  padding: 5px
}

.v .vinfo .col {
  font-size: 16px;
  display: inline-block;
  width: 50%;
  vertical-align: middle
}

.v a {
  text-decoration: none;
  color: #555
}

.v a:hover {
  color: #222
}

.v .txt-center {
  text-align: center
}

.v .txt-right {
  text-align: right
}

.v .veditor {
  width: 100%;
  min-height: 8.75em;
  font-size: .875em;
  resize: vertical;
  transition: all .25s ease;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity))
}

.v .veditor {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}

.v .vbtn {
  transition-duration: .4s;
  text-align: center;
  color: #313131;
  border: 1px solid #ededed;
  border-radius: .3em;
  display: inline-block;
  background: #ededed;
  margin-bottom: 0;
  font-weight: 400;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  white-space: nowrap;
  padding: .5em 1.25em;
  font-size: .875em;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none
}

.v .vbtn:active, .v .vbtn:hover {
  color: #3090e4;
  border-color: #3090e4;
  background-color: #fff
}

.v .vempty {
  padding: 1.25em;
  text-align: center;
  color: #999
}

.v .vlist {
  width: 100%
}

.reco-valine-wrapper #valine.v .vbtn {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity))
}

.reco-valine-wrapper #valine.v .vbtn {
  border-radius: .25rem;
  --tw-border-opacity: 1;
  border-color: rgb(93 103 232 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(93 103 232 / var(--tw-text-opacity))
}

.reco-valine-wrapper #valine.v .vbtn:hover {
  background-color: #5d67e8e6;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity))
}

.reco-valine-wrapper #valine.v .vwrap {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity))
}

.reco-valine-wrapper #valine.v .vwrap {
  border-radius: .25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity))
}

.reco-valine-wrapper #valine.v .vwrap {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}

.reco-valine-wrapper #valine.v .vwrap .vheader .vinput {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity))
}

.reco-valine-wrapper #valine.v .vwrap .vheader .vinput {
  border-width: 0px;
  border-bottom-width: 1px;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity))
}

.reco-valine-wrapper #valine.v .vwrap .vheader .vinput {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}

.reco-valine-wrapper #valine.v .vwrap .vheader .vinput {
  border-style: dashed
}

.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:focus {
  --tw-border-opacity: 1;
  border-color: rgb(93 103 232 / var(--tw-border-opacity))
}

.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:-internal-autofill-selected {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity))
}

.dark .reco-valine-wrapper #valine.v .vwrap .vheader .vinput:-internal-autofill-selected {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity))
}

.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:-internal-autofill-selected {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.dark .reco-valine-wrapper #valine.v .vwrap .vheader .vinput:-internal-autofill-selected {
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity))
}

.reco-valine-wrapper #valine.v .vinfo {
  padding-left: .5rem
}

.reco-valine-wrapper #valine.v .info {
  padding-right: .625rem
}

.reco-valine-wrapper #valine.v .vbtn {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity))
}

.reco-valine-wrapper #valine.v .vbtn {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}

.reco-valine-wrapper #valine.v a {
  --tw-text-opacity: 1;
  color: rgb(93 103 232 / var(--tw-text-opacity))
}

.reco-valine-wrapper #valine.v a:before {
  --tw-bg-opacity: 1;
  background-color: rgb(93 103 232 / var(--tw-bg-opacity))
}

:root {
  --waline-font-size: 1rem;
  --waline-white: #fff;
  --waline-light-grey: #999;
  --waline-dark-grey: #666;
  --waline-theme-color: #27ae60;
  --waline-active-color: #2ecc71;
  --waline-color: #444;
  --waline-bgcolor: #fff;
  --waline-bgcolor-light: #f8f8f8;
  --waline-bgcolor-hover: #f0f0f0;
  --waline-border-color: #ddd;
  --waline-disable-bgcolor: #f8f8f8;
  --waline-disable-color: #000;
  --waline-code-bgcolor: #282c34;
  --waline-bq-color: #f0f0f0;
  --waline-avatar-size: 3.25rem;
  --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
  --waline-badge-color: #3498db;
  --waline-badge-font-size: .75em;
  --waline-info-bgcolor: #f8f8f8;
  --waline-info-color: #999;
  --waline-info-font-size: .625em;
  --waline-border: 1px solid var(--waline-border-color);
  --waline-avatar-radius: 50%;
  --waline-box-shadow: none
}

[data-waline] pre::-webkit-scrollbar-track-piece:horizontal {
  border-radius: 6px;
  background: rgba(0, 0, 0, .1)
}

[data-waline] pre::-webkit-scrollbar-thumb:horizontal {
  width: 6px;
  border-radius: 6px;
  background: var(--waline-theme-color)
}

#wl-image-upload:focus-visible + label {
  outline: -webkit-focus-ring-color auto 1px
}

.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-track-piece:vertical {
  border-radius: 6px;
  background: rgba(0, 0, 0, .1)
}

.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-thumb:vertical {
  width: 6px;
  border-radius: 6px;
  background: var(--waline-theme-color)
}

.wl-emoji-popup .wl-tabs::-webkit-scrollbar-track-piece:horizontal {
  border-radius: 6px;
  background: rgba(0, 0, 0, .1)
}

.wl-emoji-popup .wl-tabs::-webkit-scrollbar-thumb:horizontal {
  height: 6px;
  border-radius: 6px;
  background: var(--waline-theme-color)
}

:root {
  --search-bg-color: #ffffff;
  --search-accent-color: #3eaf7c;
  --search-text-color: #2c3e50;
  --search-border-color: #eaecef;
  --search-item-text-color: #5d81a5;
  --search-item-focus-bg-color: #f3f4f5;
  --search-input-width: 8rem;
  --search-result-width: 22rem
}

:root {
  --medium-zoom-z-index: 100;
  --medium-zoom-bg-color: #ffffff;
  --medium-zoom-opacity: 1
}

:root {
  --nprogress-color: #29d;
  --nprogress-z-index: 1031
}

:root {
  --external-link-icon-color: #aaa
}

:root {
  --back-to-top-z-index: 5;
  --back-to-top-color: #3eaf7c;
  --back-to-top-color-hover: #71cda3
}

.xicon-container {
  display: inline-flex;
  cursor: pointer
}

.xicon-container.left {
  flex-direction: row;
  align-items: center
}

.xicon-container.left > svg {
  margin-right: .375rem
}

.custom-container {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  word-break: break-all;
  padding: 1rem 1.5rem
}

.custom-container > svg {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 1.75rem;
  font-weight: 700
}

.custom-container .custom-container-title {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1.5rem;
  font-weight: 700
}

.custom-container.tip {
  border-radius: .25rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(93 103 232 / var(--tw-border-opacity));
  background-color: #5d67e80d
}

.custom-container.tip .custom-container-title, .custom-container.tip svg {
  --tw-text-opacity: 1;
  color: rgb(93 103 232 / var(--tw-text-opacity))
}


.page-container .page-info {
  margin-bottom: 1rem
}

.page-info {
  display: flex;
  flex-wrap: wrap
}

.page-info .xicon-container a {
  color: inherit
}

.page-info .xicon-container a:hover {
  --tw-text-opacity: 1;
  color: rgb(93 103 232 / var(--tw-text-opacity))
}

.page-info .xicon-container:not(:last-child) {
  margin-right: 1.25rem
}

.page-meta-x {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  padding-top: 1rem;
  padding-bottom: 1rem
}

@media (min-width: 768px) {
  .page-meta-x {
    flex-wrap: nowrap;
    justify-content: space-between
  }
}

.page-meta-x .meta-item {
  margin-top: .875rem;
  cursor: pointer
}

.page-meta-x .meta-item .meta-item-label {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity))
}

.page-nav {
  padding-top: 1rem;
  padding-bottom: 0
}

.page-nav .inner {
  margin-top: 0;
  overflow: hidden;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
  padding-top: 1rem
}

@media (min-width: 768px) {
  .page-nav .inner {
    display: flex;
    justify-content: space-between
  }
}

@media (min-width: 768px) {
  .page-nav .inner.hasPrev {
    justify-content: flex-start
  }
  .page-nav .inner.hasNext {
    justify-content: flex-end
  }
  .page-nav .inner.hasPrev.hasNext {
    justify-content: space-between
  }
  .page-nav .inner.hasPrev.hasNext .next {
    margin-left: 1rem
  }
}

.page-nav .next {
  text-align: right
}

.page-nav .page-nav-item {
  margin-top: 1rem;
  display: block;
  cursor: pointer;
  border-radius: .25rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
  padding: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(93 103 232 / var(--tw-text-opacity))
}

@media (min-width: 768px) {
  .page-nav .page-nav-item {
    width: 50%
  }
}

.page-nav .page-nav-item:hover {
  --tw-border-opacity: 1;
  border-color: rgb(93 103 232 / var(--tw-border-opacity))
}

.series-container {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
  border-right: 1px solid #f0f0f0;
}

.series-container {
  --tw-bg-opacity: 1;
  background-color: #fff;
}

.series-container .series-group {
}

.series-container .series-group ul {
  border-top: 1px solid #f0f0f0;
  padding: 5px 1.2rem;
}

.series-container {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  z-index: 999;
  width: 26rem;
  overflow-y: auto;
  padding-bottom: 2rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition: all 300ms;
}

.series-container.active {
  left: -26rem;
}


.show-series .page-container.active1 {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.show-series .page-container.active {
  margin-left: 0rem !important;
}


@media (min-width: 768px) {
  .series-container {
    --tw-translate-x: 0px !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
  }
}

.series-container .series-group:not(:first-of-type) h5.series-heading {
  position: relative;
  margin-top: 2.75rem
}

.series-container .series-heading {
  margin: 0.5rem 0;
  padding: 0 20px;
  font-weight: 800
}

.series-container .series-group .series-heading ul {
  margin: 0;
  list-style-type: none;
  padding-left: 0
}

.series-container .series-group .series-heading.active {
  --tw-text-opacity: 1;
  color: rgb(93 103 232 / var(--tw-text-opacity))
}

.series-container .series-group ul {
  list-style-type: none;
}

.series-container a.series-item {
  position: relative;
  display: block;
  padding-top: .125rem;
  padding-bottom: .125rem;
  font-size: .875rem;
  line-height: 1.48rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s
}

.series-container a.series-item:before {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  display: block;
  height: 0px;
  width: 0px;
  border-radius: 50%;
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
  --tw-bg-opacity: 1;
  background-color: rgb(93 103 232 / var(--tw-bg-opacity));
  content: ""
}

.series-container a.series-item:hover {
  --tw-text-opacity: 1;
  color: rgb(93 103 232 / var(--tw-text-opacity))
}

.series-container .site-brand {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity))
}

.series-container .site-brand {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}

.series-container .site-brand {
  position: sticky;
  top: 0px;
  z-index: 40;
  margin-bottom: .75rem;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
  padding-top: 1rem;
  padding-bottom: 1rem
}

.theme-container .theme-reco-default-content, .theme-container .page-container .page-title, .theme-container .page-container .page-info, .theme-container .page-nav, .theme-container .reco-valine-wrapper {
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 768px) {
  .theme-container .theme-reco-default-content, .theme-container .page-container .page-title, .theme-container .page-container .page-info, .theme-container .page-nav, .theme-container .reco-valine-wrapper {
  }
}

@media screen and (min-width: 1024px) {
  .theme-container .theme-reco-default-content, .theme-container .page-container .page-title, .theme-container .page-container .page-info, .theme-container .page-nav, .theme-container .reco-valine-wrapper {
    max-width: 768px
  }
}

@media screen and (min-width: 1280px) {
  .theme-container .theme-reco-default-content, .theme-container .page-container .page-title, .theme-container .page-container .page-info, .theme-container .page-nav, .theme-container .reco-valine-wrapper {
    max-width: 1024px
  }
}

@media screen and (min-width: 2400px) {
  .theme-container .theme-reco-default-content, .theme-container .page-container .page-title, .theme-container .page-container .page-info, .theme-container .page-nav, .theme-container .reco-valine-wrapper {
    max-width: 1320px
  }
}

@media screen and (max-width: 768px) {
  .theme-container .theme-reco-default-content, .theme-container .page-container .page-title, .theme-container .page-container .page-info, .theme-container .page-nav, .theme-container .reco-valine-wrapper {
    max-width: 100%
  }
  .toc2,.toc,.head-right-nav{display: none!important;}
}

.theme-container .theme-reco-default-content, .theme-container .page-container .page-title, .theme-container .page-container .page-info, .theme-container .page-nav, .theme-container .reco-valine-wrapper {
  border-top: 1px solid transparent
}

.theme-container .theme-reco-default-content {
  margin-bottom: 4rem
}

.show-series .page-container {
  margin-left: 27rem;
  transition: all 300ms;
  margin-right: 20rem;
}

.show-series .page-container .content-area {
  padding: 10px 65px 65px;
  background: #fff;
  border-radius: 6px;
}

.ant-btn {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-justify-content: center;
  justify-content: center
}

.anchor-te {
  width: 12.5rem
}

.anchor-te .ant-anchor-link {
  padding: 0 0 0 1rem !important
}

.anchor-te a {
  display: inline-block;
  font-size: .875rem;
  height: 2rem;
  line-height: 2rem;
  opacity: .4;
  width: 100%
}

.anchor-te .ant-anchor-link-title-active, .anchor-te a:hover {
  font-size: 1rem;
  font-weight: 600;
  opacity: 1
}

.uc-menu {
  width: 7.5rem
}

.uc-menu .ant-dropdown-menu-item-active {
  background-color: #fff !important;
  font-weight: 700
}

.uc-menu .ant-dropdown-menu-item {
  color: #646464;
  line-height: 2 !important
}

.uc-menu .ant-dropdown-menu-item:hover {
  background-color: #fff;
  color: var(--el-color-primary);
  font-weight: 700
}

.ant-btn-primary {
  background: #05b96b;
  border-color: #343a40;
  box-shadow: 0 0.125rem #0000000b;
  color: #fff;
  text-shadow: 0 -0.0625rem 0 rgba(0, 0, 0, .12);
  border-radius: 0.25rem;
  font-size: 1rem;
  height: 2rem;
  border-radius: 4px;
}

.ant-btn-success {
  background: #dc0101;
  border-color: #dc0101;
  box-shadow: 0 0.125rem #0000000b;
  color: #fff;
  text-shadow: 0 -0.0625rem 0 rgba(0, 0, 0, .12);
  border-radius: 0.25rem;
  font-size: 1rem;
  height: 2rem;
  border-radius: 4px;
}

.article-btn {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  color: #fff;
  font-size: 12px;
}

.article-btn img {
  border-radius: 1rem;
  height: 1rem;
  width: 1rem
}

.article-btn span {
  margin-right: .625rem
}

.article-btn div, .article-btn span {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.article-btn div {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px
}

::-webkit-scrollbar-track-piece {
  background-color: #0000
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  --tw-bg-opacity: 1;
  background-color: #ccc
}

::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  --tw-bg-opacity: 1;
  background-color: #ccc
}

.site-brand {
  display: flex;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600
}

.series-item.active {
  font-weight: bold;
  color: #36ad6a;
}

#videobox {
  overflow: hidden
}

.videoplaybox ul.ulbox {
  position: absolute;
  top: 50px;
  right: -2px;
  bottom: 46px;
  background: #f0f0f0;
  z-index: 999;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  width: 24rem;
}

.videoplaybox ul.ulbox .titlebox {
  background: #fff;
  border-bottom: 1px solid #fff;
  padding: 10px;
  margin-bottom: 5px;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
}

.videoplaybox .mask {
  position: absolute;
  top: 0;
  right: 24.3rem;
  bottom: 0;
  left: 0;
  background: rgba(50, 48, 48, 0.18);
  z-index: 1
}

.videoplaybox li a {
  display: block;
  color: #333;
  padding: 10px;
  font-size: 12px;
  border-bottom: 1px solid #fff;
}

.videoplaybox li a span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.videoplaybox li a.active {
  background: #3e69ed;
  color: #fff;
}

.videoplaybox li a img {
  display: inline-block
}

</style>